<template>
<li>
  <!--<label>-->
  <!--  <input type="checkbox" :checked="todo.done" @click="handleCheck(todo.id)">-->
  <!--  <span>{{todo.title}}</span>-->
  <!--</label>-->
  <!--<button class="btn btn-danger" @click="handleDelete(todo.id,todo.title)">删除</button>-->
  <label>
    <input type="checkbox" :checked="todo.done" @click="handleCheck(todo.id)">
    <span v-show="!todo.isEdit">{{todo.title}}</span>
    <input type="text" v-show="todo.isEdit" :value="todo.title" @blur="handleBlur(todo,$event)" ref="inputTitle">
  </label>
  <button class="btn btn-danger" @click="handleDelete(todo.id,todo.title)">删除</button>
  <button class="btn btn-info" v-show="!todo.isEdit" @click="handleEdit(todo)">编辑</button>
</li>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
  name: "MyItem",
  //props: ['todo', 'checkTodo', 'deleteTodo'],
  props: ['todo'],
  methods: {
    handleCheck(id) {
      //this.checkTodo(id)
      //this.$bus.$emit('checkTodo', id)
      pubsub.publish('checkTodo', id)
    },
    handleDelete(id, title){
      if (confirm("确定删除任务: "+title+"吗？")){
        //this.deleteTodo(id)
        this.$bus.$emit('deleteTodo', id)
      }
    },
    handleEdit(todo) {
      //如果todo自身有isEdit属性就将isEdit改成true
      if (Object.prototype.hasOwnProperty.call(todo, 'isEdit')) {
        todo.isEdit = true
      }else {
        //如果没有就向todo中添加一个响应式的isEdit属性并设置为true
        this.$set(todo, 'isEdit', true)
      }
      //当Vue重新编译模板之后执行$nextTick()中的回调函数
      this.$nextTick(function (){
        //使input框获取焦点
        this.$refs.inputTitle.focus()
      })
    },
    //当input框失去焦点时更新
    handleBlur(todo, event) {
      todo.isEdit = false
      if (!event.target.value.trim()) return alert('输入不能为空！')
      this.$bus.$emit('updateTodo', todo.id, event.target.value)
    }
  }
}
</script>

<style scoped>
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

li:hover {
  background-color: #eee;
}

li:hover button{
  display: block;
}
</style>
